@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
    <div class="ibox">
        <div class="ibox-title">
            <h5>关怀盒子</h5>
        </div>
        <div class="ibox-content">

            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="-1">全部</a></li>
                    <li class="active"><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="3">待发货</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="4">待收货</a></li>
                    <li class=""><a data-toggle="tab" href="javascript:;" class="btn-tab" rel="6">已完成</a></li>
                </ul>
                <div class="tab-content" id="tblDataList">
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tplDataListTr">
    <div id="tab-3" class="tab-pane active">
        <div class="panel-body">
            <form role="form" class="form-inline">
            <div class="form-group">
                <input name="number" type="text" placeholder="会员编号"  class="form-control">
            </div>
            @{{if status < '2'}}
                <div class="form-group">
                    <input name="express_number" type="text" placeholder="快递单号"  class="form-control">
                </div>
                <div class="form-group">
                    <input name="delivery_at" type="text" placeholder="发货时间" id="datetime"  class="form-control">
                </div>
            @{{/if}}
            <button class="btn btn-white" type="button" id="buttonData">搜索</button>
        </form>
        <div class="hr-line-dashed"></div>
            <table id="tblDataList" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>会员编号</th>
                        <th>称谓</th>
                        <th>性别</th>
                        <th>职业</th>
                        <th>年龄</th>
                        <th>爱好</th>
                        <th>对他/她说的话</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    @{{each rows.data as v}}
                        <tr data-id="@{{v.id}}" data-address_id="@{{v.address_id}}">
                            <td>@{{v.user.number}}</td>
                            <td>@{{v.title}}</td>
                            <td>@{{v.sex}}</td>
                            <td>@{{v.occupation}}</td>
                            <td>@{{v.age}}</td>
                            <td>@{{v.hobby}}</td>
                            <td>@{{v.to_word}}</td>
                            <td>@{{v.is_frozen==1 ?'已激活':'未激活'}}</td>
                            <td width="200">
                                @{{if v.is_frozen==1}}
                                    <a href="javascript:;" class="m-r-xs btn btn-xs btn-primary btn-box-care-send">
                                         查看收件信息
                                    </a>
                                    @{{if v.status ==3}}
                                    <a href="javascript:;" class="m-r-xs btn btn-xs btn-primary js-send" status="4">
                                        发货
                                    </a>
                                    @{{/if}}
                                    @{{if v.status ==4}}
                                    <a href="javascript:;" class="m-r-xs btn btn-xs btn-primary js-collect-goods" status="6">
                                        确认收货
                                    </a>
                                    @{{/if}}
                                @{{/if}}
                            </td>
                        </tr>
                    @{{/each}}
                </tbody>
            </table>
            <div class="text-center pagination"></div>
        </div>
    </div>


</script>




<script type="text/html" id="tplBoxSend">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form  id="formSend" class="form-horizontal" onsubmit="return false">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">×</button>
                        <h4 class="modal-title">发货信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">快递:</label>
                                <div class="col-sm-9">
                                    <select class="form-control m-b" name="name" required>
                                        <option value="顺丰">顺丰</option>
                                        <option value="韵达">韵达</option>
                                        <option value="优速">优速</option>
                                        <option value="中通">中通</option>
                                        <option value="申通">申通</option>
                                        <option value="圆通">圆通</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">快递单号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="no" value="" required="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">预计签收时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" name="estimate_at" id="estimate_at" value="" required="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="hidden" class="form-control" value="@{{id}}" name="id" required="">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
</script>


<script type="text/html" id="tplDataSendTr">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">×</button>
                    <h4 class="modal-title">查看收货信息</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <tbody>
                            <tr>
                                <td>收货人:</td>
                                <td>@{{row.username}}</td>
                            </tr>
                            <tr>
                                <td>联系方式:</td>
                                <td>@{{row.phone}}</td>
                            </tr>
                            <tr>
                                <td>邮编:</td>
                                <td>@{{row.code}}</td>
                            </tr>
                            <tr>
                                <td>收货地址:</td>
                                <td>@{{row.province}}@{{row.city}}@{{row.area}}@{{row.address}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
</script>

@endsection

@section('pageheader')
    <link rel="stylesheet" href="/assets/datepicker/datepicker3.css" />
@endsection
@section('pagescript')
    <script src="/assets/layDate/laydate.js"></script>
<script src="/assets/datepicker/bootstrap-datepicker.js"></script>
<script>
$("#side-menu li[rel='box']").addClass("active")
.find("ul").addClass("in")
.find("li[rel='2']").addClass("active");
    var filter = {page:1,status:3,delivery_at:'','express_number':''};
    $(function () {
        renderList();

        $("#datetime").datepicker({
            format: 'yyyy-mm-dd',
            language: 'cn',
            autoclose:true,
        });

        $('.btn-tab').on('click',function(){
            $(this).parents('li').eq(0).addClass('active').siblings().removeClass('active');
            filter.status = $(this).attr('rel');
            filter.page = 1;
            renderList();
        });


        $('#tblDataList').on('click','.js-send',function(){
            var id=  $(this).parents('tr').eq(0).attr('data-id');
            $("#modalDialog").html(template("tplBoxSend", {'id':id})).modal("show");
            //
            laydate.render({
              elem: '#estimate_at'
              ,format: 'yyyy-MM-dd'
            });
        });


        $('#buttonData').on('click',function(){
            filter.number = $("input[name='number']").val();
            filter.delivery_at = $("input[name='delivery_at']").val();
            filter.express_number = $("input[name='express_number']").val();

            filter.page = 1;
            renderList();
        });

        $("#tblDataList").on("click", ".pagination a", function() {
            filter.page = $(this).attr("rel");
            renderList();
        });

        $("#modalDialog").on('submit','#formSend',function(e){
            $.post('/admin/box/care/send',$('#formSend').serialize(),function(data){
                $("#modalDialog").html('').modal("hide");
                layer.msg('操作完成');
                renderList();
            }).fail(failure);
        });

        $('#tblDataList').on('click','.js-collect-goods',function(){
            var id=  $(this).parents('tr').eq(0).attr('data-id');
            var param =  {'status':6};
            layer.confirm('确定收货',{
                btn:['确定','取消']
            },function(){
                $.post('/admin/box/care/change',{"param":param,'id':id},function(data){
                    layer.msg('操作完成');
                    renderList();
                }).fail(failure);
            },function(){
                layer.closeAll();
            })
        })

         $("#tblDataList").on('click','.btn-box-care-send',function(e){
            var id=  $(this).parents('tr').eq(0).attr('data-id');
            $.post('/admin/box/care/address',{'id':id},function(data){
                $("#modalDialog").html(template("tplDataSendTr", data)).modal("show");
            }).fail(failure);
        });

    })

    var renderList = function(){
        $("#tblDataList tbody").html('<tr><td colspan="9"><p class="ibox-loading-31">&nbsp;</p></td></tr>');
        $.get('/admin/box/care/page-rows',filter,function(data){
            var pagination = data.rows;
            data.rows.status = filter.status;
            $("#tblDataList").html(template("tplDataListTr", data));
            $(".pagination").html(page(pagination.last_page, pagination.total, pagination.current_page));
        }).fail(function(data){
            $("#tblDataList tbody").html('');
            var str = typeof(data) == 'string' ? data : data.responseJSON;
            layer.msg(str, {icon:2, time:2000});
        });
    };

</script>
@endsection
